<template>
    <div class="prove-main">
        <div class="left" :class="{left_purple_unsubmited:index%3 == 0,
                               left_yellow_unsubmited:index%3 == 1,
                               left_pink_unsubmited:index%3 == 2,
                               }">
        </div>
        <div class="right">
            <div class="chooseIcon_warp" :class="{unchooseIcon_warp:!chooseDelete}"
                >
                <img class="icon" @click="selected=!selected" :src="selected === true?choosedIcon:unchoosedIcon">
            </div>
            <div class="text_warp" :class="{text_warp_ChooseSubmit:!chooseDelete}">
                <p class="content">
                <span class="text">{{content}}</span>
                <img class="icon" src="../../../../assets/img/icon/enter.svg">
                </p>
                <p class="tip">{{tip}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import choosedIcon from '../../../../assets/img/icon/uploader_file_rb_s.svg'
import unchoosedIcon from '../../../../assets/img/icon/uploader_file_rb_n.svg'
export default {
  props: ['content', 'tip', 'index', 'selected', 'chooseDelete'],
  data () {
    return {
      choosedIcon,
      unchoosedIcon
    }
  }
}
</script>

<style lang="scss" scoped>
    .prove-main {
        width: 85%;
        height: px2rem(80);
        margin: px2rem(10) auto 0;
        background-color: #fff;
        border-radius: px2rem(6);
        position: relative;
        .left_purple_unsubmited{
            background-color: $ui-color-assist-purple;
        }
        .left_yellow_unsubmited{
            background-color: $ui-color-decorate-yellow;
        }
        .left_pink_unsubmited{
            background-color: $card-color-pink;
        }
        .left{
            float: left;
            width: px2rem(6);
            height: px2rem(80);
            border-radius: px2rem(6) 0 0 px2rem(6);
        }
        .right{
        //width: call(100%- #{px2rem(325)});
        background-color: #FFF;
        position: absolute;
        top: 0;
        left: px2rem(6);
        right: 0;
        width: 100%;
        height: px2rem(80);
        /*border: px2rem(2) solid black;*/
        border-radius: 0 px2rem(6) px2rem(6) 0;
        .chooseIcon_warp{
            float: left;
            width: px2rem(44);
            height: px2rem(80);
            .icon{
            height: px2rem(44);
            }
        }
        .unchooseIcon_warp{
            width: px2rem(20);
            /*border: px2rem(2) solid black;*/
            .icon{
            display: none;
            }
        }
        .text_warp{
            /*border: px2rem(2) solid black;*/
            width: 80%;
            float: left;
            .content{
            width: 100%;
            height: px2rem(44);
            line-height: px2rem(44);
            /*border: px2rem(1) solid red;*/
            .text{
                float: left;
                /*border: px2rem(1) solid black;*/
                max-width: 90%;
                height: px2rem(44);
                font-size: $text-size-imp;
                font-weight: 800;
                color: #333333;
                //超出的部分用省略号代替
                text-overflow: ellipsis;
                //不换行
                white-space: nowrap;
                overflow: hidden;
            }
            .icon{
                float: left;
                width: px2rem(22);
                height: px2rem(22);
                margin-top: px2rem(10);
            }
            }
            .tip{

            float: none;
            /*max-width: 100%;*/
            height: px2rem(30);
            line-height: px2rem(15);
            font-size: $text-size-normal;
            color: #999999;
            /*border: px2rem(1) solid red;*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            }
        }
        .text_warp_ChooseSubmit{
            width: 90%;
        }
        }
    }
</style>
